<template>
  <div class="page_contact">
      <a name="just"></a>
      <div class="contact_content">
        <h3>Just about me</h3>
        <div class="just">
        <el-row :gutter="20">
          <el-col :span="16"><div class="grid-content">
          <p>Daes是笔名也是网名，作为98年生的人内心坚信自己是90后，身上有90后诸多特点：陶醉于自我，愤世嫉俗，算得上妥妥的垮掉的一代。</p>
          <p>在学历贬值的年代里，初中高中没有好好学习，只知道上网打游戏，不务正业，那个时候连以后的工作都想好了，立志做个IT从业者，具体做什么却不知道。幸得高考前阵努力一把，勉强考上本科学校，混得本科文凭，好在学校教过一些技能譬如Html、Java、JS、C/C++、SQL、嵌入式、计算机网络，学得广而不专，多而不精，只能算是基础理论，马上面临毕业，冲刺一把找一个好工作。</p>
          <p>在大三有一门课程对我来说特别感兴趣也是目前为止让我有动力——Web前端。让我在写网页中获取成就感，感觉每天都过得很充实，独立学习，经常遇到难题的时候，我会在百度、简书，以及查询文档解决大部分问题。我看一些web前端学习视频在<a href="https://www.bilibili.com/" style="color: black">哔哩哔哩网站</a>，前端更新很快，学习前端教程视频就会有一些差别，导致按这步骤走就会出错，但视频评论区里会有很多一起学习的小伙伴以及大佬在里面分享解决问题的方法和一些新的学习资源，博主也收藏了很多自我觉得很好的前端资源视频教程，可以点击下方联系我分享给你。</p>
          <p>Daes的个人博客开通于2020年5月，其实在2019年Daes也做过<a href="http://hxs0623.cn3v.net/" style="color: black;" target="_blank">个人博客</a> ，那时对于建站一窍不通，很多问题摸索几天都解决不了，在现在看来是十分可笑的。写那个博客全是用的html、css静态网页，现在看来太过于单调。这次重拾博客，用Vue框架搭建，域名也用本人笔名，博客主要记录自己的心情、笔记，搜集好玩的内容。</p>
          <div class="about">
            <h5>About My Blog</h5>
            <p>域  名：www.daes.top 创建于2019年03月26日 <a href="https://www.aliyun.com/" target="_blank" class="blog_link"  rel="nofollow">注册域名</a></p>
            <p>服务器：阿里云</p>
            <p>框  架：Vue<a href="https://cn.vuejs.org/" target="_blank"  class="blog_link" rel="nofollow">查看</a></p>
          </div>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
          <el-divider direction="vertical"><i class="el-icon-mobile-phone"></i></el-divider>
            <div class="mobile">
              <p>网名：<span>Daes</span> | 泽斯</p>
              <p>籍贯：广东省 — 揭阳市</p>
              <p>年龄：22</p>
              <p>技能掌握：Html、Vue、Node</p>
              <p>喜欢的电影：《阿甘正传》</p>
              <p>喜欢的运动：篮球、乒乓、羽毛球</p>
              <p>喜欢的音乐：《光辉岁月》《水手》</p>
            </div>
            <div class="dou">
              <p><a  href="http://wpa.qq.com/msgrd?V=3&uin=810203055&Site=www.yudouyudou.com&Menu=yes" target="_blank" ><img border="0" src="//s1.ax1x.com/2020/05/24/YzBeUK.gif" alt="交流点这里" style="margin-left: 20px;"></a></p>
              <p style="margin-left:-30px;text-align:center">
              <img src="//s1.ax1x.com/2020/05/24/YzBm4O.gif" style="height:236px" alt="动漫动图">
              </p>
            </div>
          </div></el-col>
        </el-row>
        </div>
      </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.page_contact{
  height: 120%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #eaeaea;
  font-family: "微软雅黑";
}
.particles{
  position: relative;
  z-index:0;
}
.contact_content{
  height: 96%;
  width: 85%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  h3{
    display: block;
    height: 80px;
    width: 100%;
    margin-top: 20px;
    line-height: 40px;
    font-family: 宋体;
    font-size: 36px;
    color: #404040;
    text-align: center;
  }
}
.grid-content{
  font-size: 14px;
  color: #666;
  p{
    margin: 30px 0 30px 40px;
    text-indent:2em;
  }
  h5{
    display: inline-block;
    margin-top: 70px;
    padding-left: 65px;
    font-size: 22px;
    font-family: 宋体;
  }
  .blog_link{
    display: inline-block;
    padding-left: 20px;
    color: #8bbf5d;
  }
}
 .el-divider{
   position: absolute;
    height: 700px;
  }

@media screen and  (min-width:960px) and (max-width:1200px) {
  .grid-content h5{
  margin: 0 !important;
  }
}
@media screen and  (min-width:780px) and (max-width:960px)  {
  .page_contact{
    max-height: 80%;
  }
  .el-col-16{
    width: 100% !important;
  }
  .page_footer .el-col-8{
    display: none;
  }
}
@media screen and  (max-width:780px)  {
  .el-col-16{
    width: 100% !important;
  }
  .page_contact{
    max-height: 80%;
  }
  .page_contact p {
    padding: 0 20px;
    margin: 0 !important;
    font-size: 13px;
  }
  .about,.el-col-8{
    display: none;
  }
}

</style>
